<template>
  <div class="ebook">
    <!-- head -->
    <qy-navigations
    btnType="list"
    :tabFunList='tabBtnList'
    ></qy-navigations>
    <!-- content -->
    <div class="content qy-box-space" >
      <div class="content-card"  v-for="(item,index) in listData" :key="index" @click="jump(item.url)"  >
        <div> 
          <img :src="item.cover" alt="">
        </div>
        <div class="content-card-title" >{{item.desc}}</div>
      </div>
    </div>
  </div>
</template>

<script lang="js">
import Request from '@/server/http'
import Api from '@/server/api'
export default{
    name:'ebook',
    data(){
        return{
          /* 导航配置 */
          //导航列表
          tabMsgList:[
            {name:'书架',path:'/works/book/book'},
            {name:'帮助',path:'/works/resume'},
            {name:'关于',path:'/works/invalid_works'},
          ],
          //按钮列表
          tabBtnList:[
            {name:'添加本地书籍',type:'link',func:'',path:'/works/compile?type=add'},
            {name:'添加在线书籍',type:'func',func:'btn2',path:''}
          ],
          /* 数据 */
          listData:[]
        }
    },
    methods: {
      initData(){
        Request.requestPost('', Api.apiPersonSpace.textList)
          .then((res) => {
              console.log(res)
              this.listData = res.data.data
          })
          .catch((err) => {
              console.log(err);
          });
      },
      jump(url){
        this.$router.push({path:'/works/book/read',query:{src:encodeURI(url)}})
      }
    },
    mounted () {
      this.initData()
    }
}
</script>

<style scoped lang="scss">
@import "@/styles/variable.scss";
.content{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .content-card{
    margin-right: 25px;
    width: 120px;
    height: auto;
    cursor: pointer;
    color: $gray-weight;
    img{
      width: 110px;
      height: 140px;
      object-fit: cover;
      border-radius: 2px;
    }
    .content-card-title{
      padding: 10px 10px 10px 0;
      text-align: left;
    }
  }
  .content-card:hover{
    color: $blue-weight;
  }
}
</style>